<template>
  <div class="flex flex-wrap gap-4">
    <el-card style="font-size: 15px;font-weight: bold;margin-bottom: 10px" shadow="always"><span style="color: #535bf2">|</span>
      用户列表页
    </el-card>
  </div>
  <div class="userList" style="padding-top: 30px">

    <el-form style="margin-left: 15px " :inline="true" :model="userSearchQuery">
      <el-form-item label="请选择用户：">
        <el-select style="width: 150px"
                   v-model="userSearchQuery.userId"
                   placeholder="请选择用户"
                   @click="loadUser"
                   clearable>
          <el-option
              v-for="item in userOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择类型：">
        <el-select style="width: 150px"
                   v-model="userSearchQuery.userType"
                   placeholder="请选择用户"
                   @click="loadType"
                   clearable>
          <el-option
              v-for="item in typeOptions"
              :key="item.userType"
              :label="item.userTypeName"
              :value="item.userType"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">搜 索</el-button>
        <el-button type="primary" plain @click="onReset">重 置</el-button>
      </el-form-item>
    </el-form>
    <el-button style="margin-left: 15px;" type="primary" @click="addView">添加用户</el-button>
    <el-button type="danger" @click="batchDel">批量删除</el-button>


    <!--    用户（user）列表展示页-->
    <!--      userList 进行数据绑定，要进行绑定的数据都需要在data中定义好，多条数据就用数组 userList:[] -->
    <el-table
        :data="userList"
        style="width: auto"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" show-overflow-tooltip/>
      <el-table-column type="index" label="序号" width="150" show-overflow-tooltip/>

      <!--      prop属性的值要和后端传过来的保持一致
      -->
      <el-table-column prop="userId" label="账号ID" width="200" show-overflow-tooltip/>
      <el-table-column prop="userName" label="姓名" width="200" show-overflow-tooltip></el-table-column>

      <el-table-column prop="userPwd" label="密码" width="200" show-overflow-tooltip>*******</el-table-column>
      <el-table-column prop="userType" label="类型" width="200" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.userType===0">后台用户</span>
          <span v-else>前台用户</span>
        </template>
      </el-table-column>
      <el-table-column style="" label="操作" width="230">

        <!--        scope.row.userId 表示当前这条数据的userId，详情和删除都要有userId（根据id查询或删除），user表中主键id是userId 所以这样-->
        <!--        其余表中看具体情况，一般是表中的主键都叫id 那就 scope.row.id -->
        <template #default="scope">
          <el-button type="primary" @click="view(scope.row.userId)">详情</el-button>
          <el-button type="success" @click="editView(scope.row.userId)">编辑</el-button>
          <el-button type="danger" @click="delUser(scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页图标-->
    <!--    pageSize total 都是后端传过来的data中也要定义好-->
    <!--    @current-change="toPage" 点击不同页就会调用toPage方法 并且会将当前页码传过去-->
    <!--    @prev-click="toPage"  这个忘记了， 这三个事件 就是鼠标点击前端下面的页码就会执行toPage方法进行数据查询-->
    <!--    @next-click="toPage" 点击下一页 -->
    <el-pagination style="justify-content: center;margin-top: 10px"
                   background
                   layout="prev, pager,next"
                   :page-size=pageSize
                   :total=total
                   @current-change="toPage"
                   @prev-click="toPage"
                   @next-click="toPage"
    />

    <!--
      添加用户|用户详情 弹窗 共用一个(重点)
       可以看看是怎么去判断是新增用户还是查看用户详情
            新增用户时，userQuery中没有数据
            用户详情时，userQuery中有数据，因为要看展示的数据

            所有可以根据userQuery中的userId是否为空判断
                  为null表示新增
                  不为空表示详情
            后面的表单也可以进行判断，具体如下：
      -->
    <el-dialog v-model="dialogVisible" width="1000px" :title="userQuery.userId !=null ? '用户详情' : '新增用户'"
               draggable="true" center>

      <!--      是一个form表单，数据绑定到 userQuery-->
      <el-form ref="addRefForm" :model="userQuery" label-width="auto" :rules="addRules" style="max-width: 800px">

        <!--        userQuery.userId!=null 表示有数据，就是详情，才会展示下面的数据，否则不展示-->
        <el-form-item v-if="userQuery.userId !=null" label="账号ID：" prop="userId">
          <span class="detail">{{ userQuery.userId }}</span>
        </el-form-item>


        <el-form-item label="姓名：" prop="userName">
          <!--          为空，那么就是新增展示----输入框   -->
          <el-input v-if="userQuery.userId==null" v-model="userQuery.userName"/>

          <!--          否则不为空，就是用户详情，直接数据展示-->
          <span class="detail" v-else>{{ userQuery.userName }}</span>

          <el-button v-else type="primary" plain>{{ userQuery.userName }}</el-button>
        </el-form-item>

        <el-form-item label="密码：" prop="userPwd">
          <el-input type="password" v-if="userQuery.userId==null" v-model="userQuery.userPwd"/>

          <span class="detail" v-else>******</span>
        </el-form-item>

        <!--        下拉菜单
              this.typeOptions = [
                {"userType": "1", "userTypeName": "后台用户"},
                {"userType": "0", "userTypeName": "前台用户"}
              ]
        -->
        <el-form-item v-if="userQuery.userId==null" label="用户类型：">
          <el-select style="width: 150px"
                     v-model="userQuery.userType"
                     placeholder="请选择用户"
                     @click="loadType"
                     clearable>
            <el-option
                v-for="item in typeOptions"
                :key="item.userType"
                :label="item.userTypeName"
                :value="item.userType"/>
          </el-select>
        </el-form-item>

        <el-form-item v-else label="用户类型：" disabled>
          <el-select style="width: 150px"
                     v-model="userQuery.userType"
                     placeholder="请选择用户"
                     clearable>
            <el-option
                :key="userQuery.userType "
                :label="userQuery.userType===0?'后台用户': '前台用户' "
                :value="userQuery.userType"/>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="userQuery.userId==null" type="primary" @click="addUserSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>


    <el-dialog v-model="editDialogVisible" width="1000px" draggable="true" center>
      <!--      是一个form表单，数据绑定到 userQuery-->
      <el-form ref="addRefForm" :model="editUserQuery" label-width="auto" :rules="addRules" style="max-width: 800px">

        <!--        userQuery.userId!=null 表示有数据，就是详情，才会展示下面的数据，否则不展示-->
        <el-form-item label="账号ID：" prop="userId">
          <span class="detail">{{ editUserQuery.userId }}</span>
        </el-form-item>
        <el-form-item label="姓名：" prop="userName">
          <el-input v-model="editUserQuery.userName"/>
        </el-form-item>
        <el-form-item label="密码：" type="password">
          <el-input v-model="editUserQuery.userPwd"/>
        </el-form-item>
        <!--        下拉菜单
              this.typeOptions = [
                {"userType": "1", "userTypeName": "后台用户"},
                {"userType": "0", "userTypeName": "前台用户"}
              ]
        -->
        <el-form-item label="用户类型：">
          <el-select style="width: 150px"
                     v-model="editUserQuery.userType"
                     placeholder="请选择用户"
                     @click="loadType"
                     clearable>
            <el-option
                v-for="item in typeOptions"
                :key="item.userType"
                :label="item.userTypeName"
                :value="item.userType"/>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editUserSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";
import qs from "qs";

export default {
  name: "UserView",
  // 直接复制粘贴这行，后面会用到 this.reload() 表示刷新页面，当 成功执行增删改时，数据都要进行刷新，后面会用到
  inject: ['reload'],
  data() {
    return {
      // 用来存放user列表数据(绑定)，有多条数据所以使用[]
      userList: [],

      // 添加用户和用户详情的弹窗，false为关闭状态，true为开启状态
      dialogVisible: false,
      editDialogVisible: false,
      // 添加用户或者查看用户详情的数据信息绑定到当中
      userQuery: {},
      editUserQuery: {},
      // 后端传来的每页展示的条数
      pageSize: 0,
      // 总条数
      total: 0,
      // 还没用到，不管
      userIdArray: [],
      // 用来绑定用户搜索框中的数据
      userSearchQuery: {},
      // 用户搜索框的下拉菜单的信息
      userOptions: [{}],
      // 用户类型下拉框(在添加用户中的下拉菜单)
      typeOptions: [{}],
      //定义表单的验证规则
      addRules: {
        //定义账号的验证规则，规则可以有多个，所以是数组
        userName: [
          {required: true, message: '请输入添加账号', trigger: 'blur'}
        ],
        //定义密码的验证规则，规则可以有多个，所以是数组
        userPwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 16, message: '密码长度为6-16位', trigger: 'blur'}
        ]
      }
    }
  },
  // 钩子函数，当页面加载完自动调用这个函数，参数表示当前页 1
  mounted() {
    this.loadUserList(1);
  },
  methods: {

    // 当点击分页下面的页码，会调用这个方法，current参数就是点击的当前页码
    toPage(current) {
      this.loadUserList(current)
    },
    // 还没用到，先不用管(批量删除)
    handleSelectionChange(userItemArray) {
      this.userIdArray = [];
      userItemArray.forEach((user) => {
        this.userIdArray.push(user.userId);
      })

    },

    // 查询用户列表 参数为当前页，
    loadUserList(current) {
      // 第一个参数为请求路径 第二个参数为请求所携带的参数，分页查询数据，携带current表示当前页数，后端通过req.getParameter("current")获取到
      doGet("/admin/user", {
        // 注意
        current: current,
        userId:this.userSearchQuery.userId,
        userType:this.userSearchQuery.userType,
      }).then((resp) => {
        // 打印后端响应的数据，F12调试控制台，查看返回的数据格式
        console.log(resp)
        // 200为成功，后端统一返回的Result中有code已经设置了200
        // 分页查询 后端响应的数据为PageResult对象，里面有三个参数到前端，需要将参数赋值给 上面data中的变量
        // userList 表示user数据列表 对应PageResult中的list             this.userList = resp.data.data.list
        // pageSize 表示每页展示的条数 对应PageResult中的pageSize        this.pageSize = resp.data.data.pageSize
        // total 表示数据总条数 对应PageResult中的total        this.total = resp.data.data.total
        if (resp.data.code === 200) {
          this.userList = resp.data.data.list
          this.pageSize = resp.data.data.pageSize
          this.total = resp.data.data.total
        }
      })
    },

    // 用户详情方法，根据id查询用户user，同理携带user_id的参数，注意：user_id，后端也要用req.getParameter("user_id")获取到
    // 携带的参数和后端保持一致(后端要什么参数，前端给什么，不要修改后端的代码)
    view(id) {
      doGet("/admin/user/" + id).then((resp) => {
        // 不管怎样，打印查看响应的resp 看看是否成功
        console.log(resp)
        // 200 表示成功，成功就可以进行数据绑定了，让后呈现数据了
        if (resp.data.code === 200) {
          // 根据最前面变量定义，userQuery表示  添加用户 或 查看用户详情 数据信息进行绑定
          this.userQuery = resp.data.data
          // 表示打开弹窗 此时后端的数据已经绑定到userQuery中了
          this.dialogVisible = true
        }
      })
    },

    // 更具id删除用户信息
    delUser(id) {
      // messageConfirm函数和messageTip函数都是封装的函数可以点开看一下，
      // messageConfirm函数会弹出一个弹窗 是否删除该用户如果点击了确认，就会执行后面then中的内容
      // messageTip函数表示信息弹窗
      messageConfirm("是否删除该用户？").then(() => {
        doDelete("/admin/user/" + id).then((resp) => {
          if (resp.data.code === 200) {
            messageTip("删除成功!", "success")
            this.reload()
          }
        })
      })
    },
    batchDel() {

      let ids = this.userIdArray.join(",");
      doGet("/admin/user?method=deleteByIds", {
        ids: ids
      })

    },

    // 该方法表示加载用户信息，查询所有用户信息 。具体效果在用户列表根据name查询 下拉框
    loadUser() {
      doGet("/admin/user", {current: "1"}).then((resp) => {
        console.log(resp.data.data.list)
        if (resp.data.code === 200) {
          // 将后端的数据信息赋值给 userOptions,数据绑定，后续可以在下拉框中取出
          this.userOptions = resp.data.data.list
        }
      })
    },

    // 添加用户 是，用户的类型
    loadType() {
      this.typeOptions = [
        {"userType": "1", "userTypeName": "前台用户"},
        {"userType": "0", "userTypeName": "后台用户"}
      ]
    },

    // 条件查询还没实现
    onSearch() {
      this.loadUserList(1)
    },
    // 重置按钮 清空数据
    onReset() {
      this.userSearchQuery = {}
      this.loadUserList(1)
    },

    // 方法是打开添加用户的弹窗
    addView() {
      // 添加用户确保userQuery中没数据 然后在弹开
      // userQuery在根据id查询用户时进行了数据绑定，添加用户时，userQuery中的数据没用了，清空，
      this.userQuery = {}
      this.dialogVisible = true
    },

    // 添加用户的按钮，这个方法才真正执行了添加方法
    addUserSubmit() {
      // 使用qs将数据格式化了 { encode: false }表示不会出现中文乱码
      // this.userQuery中的数据就是弹出添加用户弹窗中form表单所绑定的数据(具体看所对应的表单)，
      // 使用post请求时，必须使用qs将数据格式化！！！！！！
      // TODO springBoot 不需要进行参数转换了，直接将实体对象当作数据
      // let data = qs.stringify(this.userQuery, {encode: false})
      doPost("/admin/user/save", this.userQuery).then((resp) => {
        if (resp.data.code === 200) {
          this.dialogVisible = false
          messageTip("添加成功", "success")
          // 添加数据成功，需要进行页面刷新 调用该方法
          this.reload()
        } else {
          messageTip("添加失败", "error")
        }
      })
    },
    editView(id) {
      doGet("/admin/user/" + id).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.editUserQuery = resp.data.data
          this.editDialogVisible = true
        }
      })
    },
    editUserSubmit() {
      // TODO 对象不同转换了！！！直接给参数 编辑用户使用doPut方法请求
      // let data = qs.stringify(this.editUserQuery, {encode: false})
      doPut("/admin/user", this.editUserQuery).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.editDialogVisible = false
          messageTip("修改成功！", "success")
          this.reload()
        }
      })
    }


  }
}
</script>


<style scoped>

.userList {

  width: auto;
  height: 600px;
  background-color: #ffffff;
}

.detail {
  background-color: #f5f7fa;
  width: 100%;
  padding-left: 15px;
}
</style>